<template>
    <h3>设备管理</h3>
    <el-table :data="tableData" @cell-dblclick="$func.elTableCopyText">
        <el-table-column type="expand">
            <!-- 扩展字段显示 -->
            <template #default="scope">
                PS：WEB日志写入时不会保持设备在线，此处的在线状态仅为GRPC长连接在线
                <el-table :data="scope.row.macs" @cell-dblclick="$func.elTableCopyText">
                    <el-table-column prop="id" label="网卡ID"/>
                    <el-table-column prop="mac_name" label="网卡"/>
                    <el-table-column prop="mac_addr" label="网卡地址"/>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column prop="id" label="设备编号" width="200" />
        <el-table-column prop="name" label="名称" show-overflow-tooltip/>
        <el-table-column prop="desc" label="备注" show-overflow-tooltip/>
        <el-table-column prop="goos" label="系统"/>
        <el-table-column prop="ip" label="IP" show-overflow-tooltip/>
        <el-table-column label="在线？">
            <template #default="scope">
                <span style="color: green" v-if="scope.row.in_line == 1">在线</span>
                <span style="color: red" v-else>离线</span>
            </template>
        </el-table-column>
        <el-table-column label="心跳时间" width="90">
            <template #default="scope">
                <span v-if="scope.row.in_line == 1">{{ $func.timesmarp(scope.row.last_hart).substr(11) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="添加时间" width="170">
            <template #default="scope">
                {{ $func.timesmarp(scope.row.id,3) }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button text @click="$refs['DerviceEdit'].Open(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <DerviceEdit ref="DerviceEdit" @refresh="initData"/>
</template>
<script>
import DerviceEdit from './_dervice_edit.vue'
export default {
    components:{
        DerviceEdit,// 设备编辑组件
    },
    data() {
        return {
            tableData: [],
        }
    },
    methods:{
        initData(){
            var that = this
            that.tableData = []
            that.$axios.get("api:dervice.list")
                .then(res => {
                    that.tableData = res.data
                })
        },
    },
    mounted() {
        this.initData()
    },
}
</script>